<template>
  <div>调试

    <div>
      <div>
        <m-button>默认按钮</m-button>
        <m-button icon="edit" type="primary">主要按钮</m-button>
        <m-button type="success">成功按钮</m-button>
        <m-button type="info">信息按钮</m-button>
        <m-button type="warning">警告按钮</m-button>
        <m-button type="danger">危险按钮</m-button>
        <m-button type="text">文字按钮</m-button>
        <br>
        <br>
        <m-button plain>朴素按钮</m-button>
        <m-button type="primary" plain>主要按钮</m-button>
        <m-button type="success" plain>成功按钮</m-button>
        <m-button type="info" plain>信息按钮</m-button>
        <m-button type="warning" plain>警告按钮</m-button>
        <m-button type="danger" plain>危险按钮</m-button>
        <br>
        <br>
        <m-button round>圆角按钮</m-button>
        <m-button type="primary" round>主要按钮</m-button>
        <m-button type="success" round>成功按钮</m-button>
        <m-button type="info" round>信息按钮</m-button>
        <m-button type="warning" round>警告按钮</m-button>
        <m-button type="danger" round>危险按钮</m-button>
      </div>
    </div>
    <br>
    <div>
      <m-card class="box-card">
        <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
      </m-card>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "app",
  setup: () => {
    const state = reactive({});
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style scoped lang="less">

</style>
